<template>
  <div id="history">
    <div class="pd_20 bg_white">
      <el-row :gutter="20">
        <el-col :span="7" class="el-name">登记时间：</el-col>
        <el-col :span="5" class="el-name">责任人：</el-col>
        <el-col :span="5" class="el-name">就诊状态：</el-col>
        <el-col :span="5" class="el-name">基本信息：</el-col>
      </el-row>
      <el-row :gutter="20" class="el_t_10">
        <el-col :span="7">
          <el-date-picker
            size="mini"
            class="el_long"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-col>
        <el-col :span="5">
          <el-select size="mini" v-model="search.name" class="el_long">
            <template v-for="(item,index) in users">
              <el-option :label="item.label" :value="item.key" :key="item.key"></el-option>
            </template>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-select size="mini" v-model="search.name" class="el_long">
            <template v-for="(item,index) in users">
              <el-option :label="item.label" :value="item.key" :key="item.key"></el-option>
            </template>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-input size="mini" type="text" placeholder="输入姓名/电话等关键字搜索"></el-input>
        </el-col>
        <el-col :span="2" class="text-right">
          <el-button size="mini" type="primary" plain>搜索</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="content bg_white pd_20 el_t_20">
      <el-table :data="list" :header-row-class-name="'table_header'" height="300">
        <el-table-column prop="name" label="姓名" width="100"></el-table-column>
        <el-table-column prop="sex" label="性别" width="80"></el-table-column>
        <el-table-column prop="birthday" label="出生年月" width="120"></el-table-column>
        <el-table-column prop="phone" label="电话" width="150"></el-table-column>
        <el-table-column prop="time" label="登记时间" width="200"></el-table-column>
        <el-table-column prop="user" label="责任人"></el-table-column>
        <el-table-column prop="user" label="来源"></el-table-column>
        <el-table-column prop="count" label="随访次数"></el-table-column>
        <el-table-column prop="state" label="状态"></el-table-column>
        <el-table-column prop="name" label="操作" fixed="right" width="180">
          <template slot-scope="data">
            <el-button type="primary" plain size="mini" @click="viewEdit">查看/编辑</el-button>
            <el-button type="primary" plain size="mini" @click="deleteMsg(data.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="text-right el_t_20 page_box">
        <el-pagination
          :current-page="1"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="list.length"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "history",
  data() {
    return {
      search: {
        name: 0
      },
      users: [
        {
          key: 0,
          label: "请选择责任人"
        },
        {
          key: 1,
          label: "不限"
        },
        {
          key: 2,
          label: "王小红"
        },
        {
          key: 3,
          label: "某某"
        }
      ],
      list: [
        {
          name: "胡忠信",
          sex: "男",
          birthday: "1956-12-10",
          phone: "15645374545",
          time: "2018-11-20  10:32:09",
          user: "王小红",
          count: 0,
          state: "未来院"
        },
        {
          name: "刘华",
          sex: "女",
          birthday: "1986-02-04",
          phone: "15858176517",
          time: "2018-11-20  09:32:09",
          user: "刘晓明",
          count: 1,
          state: "已来院"
        }
      ]
    };
  },
  methods: {
    viewEdit() {
      this.$router.push({ name: "history" });
    },
    deleteMsg(data) {
      this.$confirm("确定删除该条记录？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "点错了",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style scoped>
.content {
  margin-top: 10px;
  height: calc(100vh - 223px);
}
</style>
